
// option -> UIItem
export function echartOptions2UIItem(options, parentKey, filters) {
  const preKey = parentKey ? `${parentKey}.` : '';
  const currentArr = [];

  for (const key in options) {
    if (Object.hasOwnProperty.call(options, key)) {
      const element = options[key];
      let currentKey = `${preKey}${key}`;
      if (!Number.isNaN(Number(key))) {
        const Key = preKey.replace(/.$/g, '')
        currentKey = `${Key}[${key}]`;
      }
      //  console.log(currentKey)
      if (filters.includes(currentKey)) {
        continue;
      }
      if (typeof element === 'object') {
        const isRoot = currentKey.split('.').length <= 2 && !currentKey.includes('[');
        const item = {
          name: key,
          type: 'gloup',
          keyModel: currentKey,
          children: echartOptions2UIItem(element, currentKey, filters),
          value: null,
          defaultValue: null,
          placeholder: `Input ${key}`,
          selects: null,
          root: isRoot,
        };
        currentArr.push(item);
      } else {
        if (typeof element === 'boolean') {
          // bool
          const item = {
            name: key,
            type: 'boolean',
            keyModel: currentKey,
            value: element,
            defaultValue: element,
            children: [],
            selects: null,
          };
          currentArr.push(item);
        } else if (typeof element === 'string' || typeof elemnt === 'number') {
          if (element.indexOf('rgba(') > -1 || element.indexOf('#') > -1 || element.indexOf('transparent') > -1) {
            // 颜色
            const item = {
              name: key,
              type: 'color',
              keyModel: currentKey,
              value: element,
              defaultValue: element,
              children: [],
              selects: null,
            };
            currentArr.push(item);
          } else if (key == 'icon') {
            // icon
            const item = {
              name: key,
              type: 'select',
              keyModel: currentKey,
              value: element,
              defaultValue: element,
              children: [],
              selects: ["rect", "cricle", "roundRect", "triangle", "diamond", "pin", "arrow"],
            };
            currentArr.push(item);
          } else if (key == 'position') {
            if (preKey.indexOf('xAxis') > -1) {
              // xAxis的position
              const item = {
                name: key,
                type: 'select',
                keyModel: currentKey,
                value: element,
                defaultValue: element,
                children: [],
                selects: ["top", "bottom"],
              };
              currentArr.push(item);
            } else if (preKey.indexOf('yAxis')) {
              // yAxis的position
              const item = {
                name: key,
                type: 'select',
                keyModel: currentKey,
                value: element,
                defaultValue: element,
                children: [],
                selects: ["left", "right"],
              };
              currentArr.push(item);
            } else if (preKey.indexOf('tooltip')) {
              const item = {
                name: key,
                type: 'select',
                keyModel: currentKey,
                value: element,
                defaultValue: element,
                children: [],
                selects: ["left", "right", "bottom", "top", "inside"],
              };
              currentArr.push(item);
            }

          } else if (key == "orient") {
            const item = {
              name: key,
              type: 'radio',
              keyModel: currentKey,
              value: element,
              defaultValue: element,
              children: [],
              selects: ["horizontal", "vertical"],
            };
            currentArr.push(item);
          } else if (key == "left" || key == "top" || key == "bottom" || key == "right") {
            if (preKey.indexOf('title') > -1 || preKey.indexOf('legend') > -1) {
              const item = {
                name: key,
                type: 'select',
                keyModel: currentKey,
                value: element,
                defaultValue: element,
                children: [],
                selects: ["left", "center", "right"],
              };
              currentArr.push(item);
            } else {

              const item = {
                name: key,
                type: 'input',
                keyModel: currentKey,
                value: element,
                defaultValue: element,
                children: [],
                selects: null,
              };
              currentArr.push(item);
            }
          } else if (key == "trigger") {
            // 输入框
            const item = {
              name: key,
              type: 'select',
              keyModel: currentKey,
              value: element,
              defaultValue: element,
              children: [],
              selects: ["axis", "item", "none"],
            };
            currentArr.push(item);
          } else if (key == 'target' || key == 'subtarget') {
            // 输入框
            const item = {
              name: key,
              type: 'select',
              keyModel: currentKey,
              value: element,
              defaultValue: element,
              children: [],
              selects: ["blank", "self"],
            };
            currentArr.push(item);
          } else if (key == 'type' && preKey.indexOf('lineStyle') > -1) {
            // lineType
            const item = {
              name: key,
              type: 'select',
              keyModel: currentKey,
              value: element,
              defaultValue: element,
              children: [],
              selects: ["solid", "dashed", "dotted"],
            };
            currentArr.push(item);
          } else if (key == 'type' && preKey.indexOf("xAxis") > -1) {
            const item = {
              name: key,
              type: 'select',
              keyModel: currentKey,
              value: element,
              defaultValue: element,
              children: [],
              selects: ["value", "category", "time", "log"],
            };
            currentArr.push(item);
          }  else if (key == 'rotate') {
            const item = {
              name: key,
              type: 'number',
              keyModel: currentKey,
              value: element,
              defaultValue: element,
              children: [],
              selects: null,
            };
            currentArr.push(item);
          } else {
            // 输入框
            const item = {
              name: key,
              type: 'input',
              keyModel: currentKey,
              value: element,
              defaultValue: element,
              children: [],
              selects: null,
            };
            currentArr.push(item);
          }

        } else if (typeof element === 'function') {
          // 输入框
          const item = {
            name: key,
            type: 'function',
            keyModel: currentKey,
            value: element,
            defaultValue: element,
            children: [],
            selects: null,
          };
          currentArr.push(item);
        }
      }


    }
  }
  return currentArr;
}
// interface UIItem {
//     name: string;
//     type: 'input' | 'switch' | 'boolean' | 'color' | 'gloup';
//     keyModel: string;
//     value: string | boolean | number;
//     defaultValue?: string | boolean | number;
//     children?: UIItem[];
//     selects?: Array<string | boolean | number | object>;
// }

export function renderUIitem(UIItem) {
  const {
    type,
    children,
    name,
    keyModel,
    selects
  } = UIItem;
  if (type === 'input') {
    return (
      `<div>
          <p class="padding_border">${name}</p >
          <el-input
            class="padding_border"
            v-model="${keyModel}"
            placeholder="Input ${name}..."
          ></el-input>
        </div>`
    )
  } else if (type === 'boolean') {
    return (
      `<p class="padding_border panelStyleBGC">
          <span>${name}</span>
          <el-switch
            class="padding_border"
            v-model="${keyModel}"
            active-text="True"
            inactive-text="False"
          ></el-switch>
        </p >`
    )

  } else if (type === 'function') {
    return (`<div>
        <p class="padding_border">${name}</p >
        <el-input
          class="padding_border"
          type="textarea"
          :rows="2"
          placeholder="Input ${name}..."
          v-model="${keyModel}"
        >
        </el-input>
      </div>`)
  } else if (type === 'select') {
    return `<div>
        <p class="padding_border">${name}</p >
        <el-select
          v-model="${keyModel}"
          filterable
          allow-create
          default-first-option
          placeholder="Input Or Select ${name}">
          ${selects.map(item => {
      return `<el-option label="${item}" value="${item}"></el-option>`
    }).join('\n')}
        </el-select>
      </div>`
  } else if (type === 'color') {
    return `<div>
        <p class="padding_border panelStyleBGC">
          <span>${name}</span>
          <el-color-picker
            v-model="${keyModel}"
            show-alpha>
          </el-color-picker>
        </p >
      </div>`
  } else if (type === 'radio') {
    return `<div>
        <p class="padding_border">${name}</p >
        ${selects.map(item => {
      return `<el-radio
            class="padding_border"
            v-model="${keyModel}"
            label="${item}"
          >
            ${item}
          </el-radio>`
    }).join('\n')}
      </div>`
  } else if (type === 'number') {
    return `<p class="padding_border panelStyleBGC">
        <span>${name}</span>
        <el-input-number v-model="${keyModel}"
          controls-position="right"
        ></el-input-number>
      </p >`

  } else if (type === 'gloup') {
    if (UIItem.root) {
      return `<el-collapse value="root">
        <el-collapse-item class="containerTitle" title="样式配置" name="root">
          <div class="detail">${children.map((item) => renderUIitem(item)).join('\n')}</div>
        </el-collapse-item>
      </el-collapse>`
    }
    return `<el-collapse accordion>
        <el-collapse-item class="containerTitle" title="${name}" name="${name}">
          <div class="detail">${children.map((item) => renderUIitem(item)).join('\n')}</div>
        </el-collapse-item>
      </el-collapse>`
  }
  return '';
}

const filters = [
  "optionLine.baseOption.xAxis.data",
  "optionLine.baseOption.xAxis.axisLabel.fontSize",
  "optionLine.baseOption.xAxis.axisLabel.verticalAlign",
  "optionLine.baseOption.yAxis.axisLabel.fontSize",
  "optionLine.baseOption.yAxis.type",
  "optionLine.baseOption.series",
  "optionLine.baseOption.tooltip.axisPointer",
  "optionLine.baseOption.title.textStyle.fontWeight",
  "optionLine.baseOption.title.textStyle.fontSize",
  "optionLine.baseOption.title.subtextStyle.fontWeight",
  "optionLine.baseOption.title.subtextStyle.fontSize",
  "optionLine.baseOption.legend.textStyle.fontSize",
  "optionLine.baseOption.legend.itemWidth",
  "optionLine.baseOption.legend.itemHeight",
  "optionLine.baseOption.dataZoom",
];
export function filter(item) {
  return filters.map(val => {
    return val.replace(/optionLine/g, item)
  })
}